<template>
  <el-form-item :class="attributes?.customClassName?.formItemClassName ?? ''" v-bind="attributes.formItem">
    <template
      v-for="item in attributes?.formItem?.slotScope ?? []"
      :key="item.slotName"
      v-slot:[item.slotName]="scope">
      <component :is="item.render(scope)" />
    </template>
    <el-cascader
      v-model="selectValue"
      :class="attributes?.customClassName?.elModelClassName ?? ''"
      :options="attributes.elOption?.options? (typeof attributes.elOption.options === 'function'?attributes.elOption.options():attributes.elOption.options) : []"
      :props="attributes.elOption?.props? (typeof attributes.elOption.props === 'function'?attributes.elOption.props():attributes.elOption.props) : {}"
      v-bind="attributes.elModel">
      <template
        v-for="item in attributes?.elModel?.slotScope ?? []"
        :key="item.slotName"
        v-slot:[item.slotName]="scope">
        <component :is="item.render(scope)" />
      </template>
    </el-cascader>
  </el-form-item>
</template>
<script setup>
import { computed,ref } from 'vue'
const props = defineProps({
  value: {
    type: [String, Number, Boolean, Date, Array],
    required: true
  },
  attributes: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['push-val'])
const selectValue = computed({
  get() {
    return props.value
  },
  set(val) {
    emit('push-val', val)
  }
})
</script>
<style lang="scss" scoped>
 :deep(.el-input__icon){
   font-size: 16px !important;
   color:#000 !important;
 }
 :deep(.el-input__suffix){
  padding:0;
  display:block
 }
 :deep(.el-input__suffix .el-input__suffix-inner){
  padding-top:12px
 }
</style>